<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org">
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
<style type="text/css">
table td {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
</style>
<title>我的通知公告</title>
<script type="text/javascript" th:src="@{/js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript"
	th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/notice.js}"></script>
</head>

<body>
	<div class="container" style="width: 100%; padding: 25px 15px;">
		<div class="row clearfix">
			<div class="col-md-12 column"
				style="padding: 20px; padding-top: 0px;">
				<ul id="noticeTab" class="nav nav-tabs">
					<li class="active"><a href="#publishNotice" data-toggle="tab">发布的公告</a></li>
					<li><a href="#receivePublish" data-toggle="tab">接收的公告</a></li>
				</ul>
				<div id="noticeTabContent" class="tab-content">
					<div class="tab-pane fade in active" id="publishNotice">
						<table class="table table-bordered" style="margin-top: 20px;">
							<thead>
								<tr>
									<th>序号</th>
									<th style="width: 300px;">标题</th>
									<th>内容</th>
									<th style="width: 100px;">状态</th>
									<th style="width: 100px;">操作</th>
								</tr>
							</thead>
							<tbody id="publishTable">
								<tr th:each="notice:${notices.beanList}">
									<td th:text="${notice.n_id}"></td>
									<td th:text="${notice.n_title}"></td>
									<td th:text="${notice.n_content}"></td>
									<td th:text="${notice.status.s_name}"></td>
									<td><a th:href="@{/notice/my}+'/'+${notice.n_id}"
										class="btn btn-primary btn">修改</a></td>
								</tr>
							</tbody>
						</table>
						<div id="publishPage"></div>
					</div>
					<div class="tab-pane fade" id="receivePublish">
						<table class="table table-bordered" style="margin-top: 20px;">
							<thead>
								<tr>
									<th>序号</th>
									<th style="width: 300px;">标题</th>
									<th>内容</th>
									<th style="width: 100px;">发布人</th>
								</tr>
							</thead>
							<tbody id="receiveTable">
								<tr th:each="notice:${notices.beanList}">
									<td th:text="${notice.n_id}"></td>
									<td th:text="${notice.n_title}"></td>
									<td th:text="${notice.n_content}"></td>
									<td th:text="${notice.employee.name}"></td>
								</tr>
							</tbody>
						</table>
						<div id="receivePage"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div>
		<a href="javascript:void(0);"
				onclick="'javascript:changePage(1);'">首页</a>
		<th:if th:test="${notices.pageIndex>1}">
			<a href="javascript:void(0);"
				th:onclick="'javascript:changePage(\''+${notices.pageIndex-1}+'\');'">上一页</a>
		</th:if>
		<span th:text="${notices.pageIndex}"></span>/ <span
			th:text="${notices.totalPage}"></span>
		<th:if th:test="${notices.pageIndex<notices.totalPage}">
			<a href="javascript:void(0);"
				th:onclick="'javascript:changePage(\''+${notices.pageIndex+1}+'\');'">下一页</a>
		</th:if>
		<a href="javascript:void(0);"
				onclick="'javascript:changePage(\''+${notices.totalPage}+'\');'">末页</a> 
		<a href="javascript:void(0);"
				onclick="javascript:changePage(-2)">跳转：</a>
				<input id="pageIndexInput" />
	</div>
	<form id="getNotice" action="/notice/my" method="post">
		<input id="pageIndex" name="pageIndex" type="hidden" value="3" />
	</form>
	<a href="javascript:void(0)" onclick="javascript:changePage(2)">测试</a>
</body>

<script type="text/javascript">
	function changePage(pageIndex) {
		/* 将参数赋予#pageIndex */
		if(pageIndex==-2){
			$("#pageIndex").val($("#pageIndexInput").val());
			$("#getNotice").submit();
		}else{
			$("#pageIndex").val(pageIndex);
			$("#getNotice").submit();
		}
		
	}
</script>
</html>